<script>
import loginInfo from "./util/loginInfo"
export default {
    data() {
        return {
            tableData: [
                // {
                //     "rcdId": 123,
                //     "rcdUserID": 123456,
                //     "rcdBookID": 752136,
                //     "rcdBorrowDate": 1645362141170,
                //     "rcdReturnDate": 1645362153685,
                //     "rcdReturned": 0, // 归还状态
                //     "bookName": "c++程序设计教程（通用版）（第三版）",
                //     "bookAuthor": "钱能",
                //     "bookISBN": "978-7825-1236-789",
                //     "bookPress": "湖南大学出版社",
                //     "bookExistingNumber": 1, // 现存总数量
                //     "bookTotalNumber": 16, // 总数量
                //     "userEmail": "abc@email.com",
                //     "userStdId": "202108010500",
                //     "userName": "张三",
                //     "userGender": 1,
                //     "userAge": 16,
                //     "userBio": "",
                //     "userGroup": 1
                // }
            ],
            searchForm: {
                bookId: "",
                userId: "",
                bookName: "",
                returned: "all",
                borrowDate: null,
                returnDate: null,
            },
            editingUser: {},
            dialogVisible: false,
            pagination: {
                pageSize: 10,
                currentPage: 1,
                total: 1
            },
        }
    },
    async mounted() {
        if (this.$route.query.userId) {
            this.searchForm.userId = this.$route.query.userId
        }
        if (this.$route.query.bookId) {
            this.searchForm.bookId = this.$route.query.bookId
        }
        this.onSearch(true)
    },
    methods: {
        dateFormat(val) {
            let date = new Date(+val);
            return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
        },
        onCurrentPageChange(val) {
            this.pagination.currentPage = val
            this.onSearch()
        },
        onPageSizeChange(val) {
            this.pagination.currentPage = 1
            this.pagination.pageSize = val
            this.onSearch()
        },
        editUser(index) {
            this.dialogVisible = true;
            this.editingUser = { ...this.tableData[index] }
        },
        onSearch(clickBtn = false) {
            if (clickBtn) {
                this.pagination.currentPage = 1
            }
            let obj = {}
            let form = this.searchForm
            if (form.bookId !== '') {
                obj.bookId = form.bookId
            }
            if (form.userId !== '') {
                obj.userId = form.userId
            }
            if (form.bookName !== '') {
                obj.bookName = form.bookName
            }

            if (form.returned !== 'all') {
                obj.returned = +form.returned
            }

            if (form.borrowDate) {
                obj.minBorrowDate = form.borrowDate[0].getTime()
                obj.maxBorrowDate = form.borrowDate[1].getTime()
            }
            if (form.returnDate) {
                obj.minReturnDate = form.returnDate[0].getTime()
                obj.maxReturnDate = form.returnDate[1].getTime()
            }

            obj.page = this.pagination.currentPage
            obj['page-size'] = this.pagination.pageSize

            this.$http.get('/records', {
                headers: {
                    'token': loginInfo.getToken()
                },
                params: {
                    ...obj
                }
            }).then((v) => {
                this.tableData = v.data.records
                this.pagination.total = v.data['total-count']
            })
        },
        onRemoveRecord(index, id) {
            this.$http.delete(`/records/${id}`, {
                headers: {
                    'token': loginInfo.getToken()
                }
            }).then((v) => {
                if (v.status === 200) {
                    this.$message.success('删除成功!');
                    this.onSearch();
                } else {
                    this.$message.warning(v.msg);
                }
            })
        }
    }
}
</script>

<template>
    <div>
        <el-card shadow="never">
            <el-form :inline="true">
                <el-row>
                    <el-col>
                        <el-form-item label="图书ID">
                            <el-input clearable v-model="searchForm.bookId" placeholder="请输入关键字"></el-input>
                        </el-form-item>
                        <el-form-item label="借书人ID">
                            <el-input clearable v-model="searchForm.userId" placeholder="请输入关键字"></el-input>
                        </el-form-item>
                        <el-form-item label="图书名称">
                            <el-input clearable v-model="searchForm.bookName" placeholder="请输入关键字"></el-input>
                        </el-form-item>
                        <el-form-item label="归还状态">
                            <el-select
                                v-model="searchForm.returned"
                                style="width: 120px;"
                                placeholder="归还状态"
                            >
                                <el-option label="全部" value="all"></el-option>
                                <el-option label="已归还" value="1"></el-option>
                                <el-option label="尚未归还" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="借阅时间：">
                            <el-date-picker
                                v-model="searchForm.borrowDate"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            ></el-date-picker>
                        </el-form-item>
                        <el-form-item label="归还时间：">
                            <el-date-picker
                                v-model="searchForm.returnDate"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            ></el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                @click="onSearch"
                                style="width: 100px;"
                                icon="search"
                                type="primary"
                            >搜索</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-table :height="350" :data="tableData" border style="margin: 20px 0;width: 100%">
                <el-table-column type="expand" label="详情" width="100">
                    <template #default="props">
                        <el-row style="padding: 10px 50px;">
                            <el-col :span="12" style="padding-right:50px;">
                                <el-descriptions title="图书信息" border>
                                    <el-descriptions-item label="图书名称">{{ props.row.bookName }}</el-descriptions-item>
                                    <el-descriptions-item label="作者">{{ props.row.bookAuthor }}</el-descriptions-item>
                                    <el-descriptions-item label="ISBN">{{ props.row.bookISBN }}</el-descriptions-item>
                                    <el-descriptions-item label="出版社">{{ props.row.bookPress }}</el-descriptions-item>
                                    <el-descriptions-item
                                        label="库存"
                                    >{{ props.row.bookExistingNumber + ' / ' + props.row.bookTotalNumber }}</el-descriptions-item>
                                </el-descriptions>
                            </el-col>
                            <el-col :span="12">
                                <el-descriptions title="借书人信息" border>
                                    <el-descriptions-item label="邮箱地址">{{ props.row.userEmail }}</el-descriptions-item>
                                    <el-descriptions-item label="学号">{{ props.row.userStuId }}</el-descriptions-item>
                                    <el-descriptions-item label="姓名">{{ props.row.userName }}</el-descriptions-item>
                                    <el-descriptions-item
                                        label="性别"
                                    >{{ props.row.userGender === 1 ? "男" : "女" }}</el-descriptions-item>
                                    <el-descriptions-item label="年龄">{{ props.row.userAge }}</el-descriptions-item>
                                    <el-descriptions-item label="用户组">
                                        <span v-if="props.row.userGroup === 0">管理员</span>
                                        <span v-else-if="props.row.userGroup === 1">普通用户</span>
                                        <span v-else-if="props.row.userGroup === 2">禁用</span>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="简介">{{ props.row.userBio }}</el-descriptions-item>
                                </el-descriptions>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column prop="rcdId" label="记录ID" width="90" />
                <el-table-column show-overflow-tooltip prop="bookName" label="图书名称" />
                <el-table-column show-overflow-tooltip prop="userName" label="借书人姓名" />
                <el-table-column label="借阅时间">
                    <template #default="scope">{{ dateFormat(scope.row.rcdBorrowDate) }}</template>
                </el-table-column>
                <el-table-column prop="rcdReturnDate" label="归还时间">
                    <template #default="scope">
                        <span v-if="scope.row.rcdReturned">{{ dateFormat(scope.row.rcdReturnDate) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="rcdReturned" label="归还状态">
                    <template #default="scope">
                        <el-tag v-if="scope.row.rcdReturned" type="success" size="default">已归还</el-tag>
                        <el-tag v-else size="default" type="warning">尚未归还</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="rcdReturned" label="操作">
                    <template #default="scope">
                        <el-popconfirm
                            confirm-button-text="确定"
                            cancel-button-text="取消"
                            icon="InfoFilled"
                            @confirm="onRemoveRecord(scope.$index, scope.row.rcdId)"
                            icon-color="red"
                            title="确定要删除吗？"
                        >
                            <template #reference>
                                <el-button type="danger" icon="delete">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @current-change="onCurrentPageChange"
                @size-change="onPageSizeChange"
                :page-sizes="[10, 15, 20]"
                background
                :current-page="pagination.currentPage"
                layout="sizes, prev, pager, next, jumper"
                :total="pagination.total"
            ></el-pagination>
        </el-card>
        <!-- 编辑对话框 -->
        <el-dialog v-model="dialogVisible" :title="'编辑图书 ' + editingUser.bookId">
            <EditBookInfo @submit="onSave" :data="editingUser"></EditBookInfo>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<style>
</style>